<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="data" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>

			<swiper class="swiper-box">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height:100%;width:100%;" @scrolltolower="reachBottom">
						<view class="page-box" v-if="data[current].lists && data[current].lists.length">
							<view class="order" v-for="(res, index) in data[current].lists" :key="res.order_no">
								<view @click="openOrderInfo(res.order_no)">
									<view class="top">
										<view class="left ">
											<!-- <u-icon name="rmb-circle" :size="30" color="rgb(94,94,94)"></u-icon> -->
											<view class="code">{{ res.order_no }}</view>
											<!-- <u-icon name="arrow-right" color="rgb(203,203,203)" :size="20"></u-icon> -->
										</view>
										<view class="right">
											<u-tag mode="dark" shape="circle" v-if="res.status == 0" text="已取消" type="info"></u-tag>
											<u-tag mode="dark" shape="circle" v-else-if="res.status == 1" text="待支付" type="warning"></u-tag>
											<u-tag mode="dark" shape="circle" v-else-if="res.status == 2" text="待支付" type="warning"></u-tag>
											<u-tag mode="dark" shape="circle" v-else-if="res.status == 3" text="待发货" type="primary"></u-tag>
											<u-tag mode="dark" shape="circle" v-else-if="res.status == 4" text="已发货" type="primary"></u-tag>
											<u-tag mode="dark" shape="circle" v-else-if="res.status == 5" text="已完成" type="success"></u-tag>
										</view>
									</view>
									<u-line class="u-m-t-10"></u-line>
									<view class="item" v-for="(item, index) in res.items" :key="index">
										<view class="left"><image :src="item.goods_cover" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goods_name }}</view>
											<view class="type">{{ item.goods_spec }}</view>
											<view class="delivery-time" v-if="false">发货时间啥东东</view>
										</view>
										<view class="right u-flex-1">
											<view class="price">
												<text class="u-font-xs">￥</text>
												<text class="u-font-lg">{{ item.price_selling.split('.')[0] || 0 }}.</text>
												<text class="u-font-xs">{{ item.price_selling.split('.')[1] || '00' }}</text>
											</view>
											<view class="u-font-xs u-tips-color">x {{ item.stock_sales }}</view>
										</view>
									</view>
								</view>
								<view class="total">
									<view>共 {{ res.number_goods }} 件商品，合计 ￥{{ res.amount_goods }}</view>
									<view class="u-m-t-10">
										<text class="u-tips-color" v-if="res.amount_reduct > 0">（ 随机立减 ￥{{ res.amount_reduct }}，</text>
										<text class="u-tips-color" v-if="res.amount_express > 0">运费 ￥{{ res.amount_express }})</text>
										<text class="u-tips-color" v-else>免运费 ）</text>
										<text v-if="res.payment_status < 1">
											需支付￥
											<text class="u-font-lg">{{ res.amount_real.split('.')[0] || 0 }}.</text>
											<text class="u-font-xs">{{ res.amount_real.split('.')[1] || '00' }}</text>
										</text>
										<text v-else>
											已支付￥
											<text class="u-font-lg">{{ res.payment_amount.split('.')[0] || 0 }}.</text>
											<text class="u-font-xs">{{ res.payment_amount.split('.')[1] || '00' }}</text>
										</text>
									</view>
								</view>
								<view class="bottom">
									<view class="more" v-if="false"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
									<view class="logistics btn" v-if="false">查看物流</view>
									<view class="evaluate btn" v-if="res.status < 1" @click="doRemove(res.order_no)">删 除</view>
									<view class="logistics btn" v-if="res.status < 3 && res.status > 0" @click="doCancel(res.order_no)">取 消</view>
									<view class="evaluate btn" v-if="res.status < 3 && res.status > 0" @click="openOrderPay(res.order_no)">支 付</view>
								</view>
							</view>
							<u-loadmore :status="data[current].more"></u-loadmore>
						</view>
						<!-- 订单数据不存在 -->
						<view class="page-box" v-else>
							<view>
								<view class="centre">
									<image src="@/static/image/icon/order.png" mode=""></image>
									<view class="explain">
										您还没有相关的订单
										<view class="tips">可以去看看有那些想买的</view>
									</view>
									<view @click="openShopHome()" class="btn">随便逛逛</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<m-login ref="login"></m-login>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: [
				{
					name: '全 部',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [0, 1, 2, 4, 5, 6]
				},

				{
					name: '待付款',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [1, 2]
				},
				{
					name: '待审核',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [3]
				},
				{
					name: '待发货',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [4]
				},
				{
					name: '待收货',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [5]
				},
				{
					name: '已完成',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [6]
				},
				{
					name: '已取消',
					more: 'loadmore',
					page: 1,
					count: 0,
					lists: [],
					status: [0]
				}
			],
			current: 0
		};
	},
	mounted() {
		this.load();
	},
	methods: {
		// 加载订单数据
		load() {
			this.$refs.login.local().then(() => {
				// 加载当前选项订单
				this.getOrderList(this.current);
				// 刷新订单数量统计
				this.$u.post('data/api.auth.order/total').then(ret => {
					if (ret.code > 0) {
						this.data.forEach((v, j) => {
							this.data[j].count = 0;
							for (let name in ret.data) {
								let status = name.split('t').pop();
								if (v.status.join(',').indexOf(status) > -1) {
									this.data[j].count += ret.data[name];
								}
							}
						});
					}
				});
			});
		},
		// 加载更新数据
		reachBottom() {
			this.data[this.current].more = 'loadmore';
			this.getOrderList(this.current);
		},
		// 加载指定列表
		getOrderList(idx) {
			if (this.data[idx].more !== 'loadmore') return;
			let params = {
				page: this.data[idx].page,
				status: this.data[idx].status.join(',')
			};
			this.$u.api.post('data/api.auth.order/get', params, '加载中...', false, true).then(ret => {
				this.data[idx].page = ret.data.page.current + 1;
				this.data[idx].lists = this.data[idx].lists.concat(ret.data.list);
				if (this.data[idx].page >= ret.data.page.pages) {
					this.data[idx].more = 'nomore';
				} else {
					this.data[idx].more = 'loadmore';
				}
			});
		},
		// 移除用户订单
		doRemove(order) {
			this.$u.message.confirm('确定要删除订单吗？').then(state => {
				if (state) {
					this.$u.api.post('data/api.auth.order/remove', { order_no: order }).then(ret => {
						this.load();
					});
				}
			});
		},
		// 取消用户订单
		doCancel(order) {
			this.$u.message.confirm('确定要取消订单吗？').then(state => {
				if (state) {
					this.$u.api.post('data/api.auth.order/cancel', { order_no: order }).then(ret => {
						this.load();
					});
				}
			});
		},
		// 跳转到支付页面
		openOrderPay(order) {
			this.$u.route('pages/order/xpay', { order: order });
		},
		// 跳转到订单详情
		openOrderInfo(order) {
			this.$u.route('pages/order/show', { order: order });
		},
		// 跳转到商城首页
		openShopHome() {
			this.$u.page.tab('pages/goods/index');
		},
		// tab栏切换
		change(index) {
			this.current = index;
			this.getOrderList(index);
		}
	},
	// 下拉刷新处理
	onPullDownRefresh() {
		this.load();
		setTimeout(() => uni.stopPullDownRefresh(), 500);
	}
};
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.order {
	width: 710rpx;
	padding: 25rpx;
	font-size: 28rpx;
	margin: 20rpx auto;
	box-sizing: border-box;
	border-radius: 20rpx;
	background-color: $u-bg-main;

	.top {
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.code {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.right {
			float: right;
		}
	}

	.item {
		display: flex;
		margin: 20rpx 0 0;
		justify-content: space-between;

		.left {
			margin-right: 20rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}

		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}

		.right {
			text-align: right;
			margin-left: 10rpx;
			padding-top: 20rpx;
		}
	}

	.total {
		font-size: 24rpx;
		margin-top: 20rpx;
		text-align: right;

		.total-price {
			font-size: 32rpx;
		}
	}

	.bottom {
		display: flex;
		padding: 0 10rpx;
		margin-top: 40rpx;
		align-items: center;
		justify-content: flex-end;

		.btn {
			width: 120rpx;
			color: $u-type-info-dark;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			line-height: 52rpx;
			margin-left: 25rpx;
			border-radius: 26rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
}

.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;

	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}

	.btn {
		color: #ffffff;
		width: 200rpx;
		margin: 80rpx auto;
		font-size: 26rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}

.wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
}

.swiper-box {
	flex: 1;
}

.swiper-item {
	height: 100%;
}
</style>
